<!-- 安全教育 -->
<template>
  <view class="page">
    <mescroll-body
      class="water_scroll"
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      @up="upCallback"
    >
      <view
        class="safeinfo"
        v-for="(item, index) in dataList"
        :key="index"
        @click="
          navTo(`/pageSecurity/safetyStudy/safetyStudyInfo?id=${item.id}`)
        "
      >
        <view> 主题：{{ item.trainingName }} </view>
        <view> 日期：{{ item.trainingTime }} </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      dataList: [],
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
    };
  },
  created() {},
  methods: {
    /*下拉刷新的回调 */
    downCallback(page) {
      console.log("downCallback");
      let that = this;
      //联网加载数据
      this.apis.securityApi
        .afSafetyEducationList({
          pageNum: page.num,
          pageSize: page.size,
        })
        .then((res) => {
          this.dataList = res.rows;
          this.mescroll.endBySize(res.rows.length, res.total);
        })
        .catch(() => {
          //联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        });
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.apis.securityApi
        .afSafetyEducationList({
          pageNum: page.num,
          pageSize: page.size,
        })
        .then((res) => {
          this.dataList = this.dataList.concat(res.rows);
          this.mescroll.endBySize(res.rows.length, res.total);
        })
        .catch(() => {
          //联网失败的回调,隐藏下拉刷新的状态
          this.mescroll.endErr();
        });
    },
  },
};
</script>

<style lang="scss">
.safeinfo {
  margin-bottom: 20upx;
  background: #ffffff;
  box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.06);
  border-radius: 12upx;
  padding: 26upx 32upx;
  font-size: 28upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  view:nth-child(2) {
    margin-top: 22upx;
    font-size: 26upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
}
</style>
